<template>
  <div>
    <!-- 最外层容器 -->
    <el-container>
      <!-- 上半部分：头部 -->
      <el-header class="layout-header">
        <h1>洪城大厦图书馆欢迎您</h1>
      </el-header>
      <!-- 下半部分：由于还需要分左右，所以依然是容器 -->
      <el-container class="layout-body">
        <!-- 下半部分的左侧部分：菜单 -->
        <el-aside class="layout-aside">

          <el-menu
              router
              background-color="#222222"
              text-color="#fff"
              active-text-color="#fff"
              :default-active="this.$router.currentRoute.path"
              class="el-menu-vertical-demo">
            <el-menu-item index="/sys-admin/index">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-unfold"></i>
                <span>分类管理</span>
              </template>
              <el-menu-item index="/sys-admin/category/add-category">
                <span slot="title">添加分类</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/category/list">
                <span slot="title">分类列表</span>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-notebook-2"></i>
                <span>图书管理</span>
              </template>
              <el-menu-item index="/sys-admin/book/add-book">
                <span slot="title">添加图书</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/book/list">
                <span slot="title">书籍列表</span>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/sys-admin/user/management">
                <span slot="title">管理用户</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/user/list">
                <span slot="title">用户列表</span>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-reading"></i>
                <span>借书管理</span>
              </template>
              <el-menu-item index="/sys-admin/borrow/list">
                <span slot="title">在借书籍</span>
              </el-menu-item>
            </el-submenu>

            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-check"></i>
                <span>权限管理</span>
              </template>
            </el-submenu>
          </el-menu>

        </el-aside>
        <!-- 下半部分的右侧部分：页面主体 -->
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

</script>

<style>
.layout-header {
  line-height: 60px;
  background: #2453c2;
  color: #fff;
}
.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}
.layout-aside {
  background: #222;
}
.el-menu-item.is-active {
  background: #3d3c3c !important;
}
.layout-aside i{
  color:white !important;
}
</style>